<template>
	<view class="main">
		<uni-nav-bar @clickLeft="back" left-icon="left" title="审核订单修改详情" background-color="#007AFF"
			color="#000" statusBar="true"></uni-nav-bar>

		<scroll-view class="scrollView" scroll-y="true" :style="{height: setcollapseheight() + 'px'}">

			<view class="itemBox">
				<view class="itemContent">
					<view class="itemTitle">执行单号:</view>
					<view class="itemValue" @click="copyText(formData.executeNo)">{{formData.executeNo||'--'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">运营方:</view>
					<view class="itemValue">{{formData.providerName||'--'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">服务分类:</view>
					<view class="itemValue">{{formData.serviceTypeName||'--'}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">服务项目:</view>
					<view class="itemValue">{{formData.serviceProjectName||'--'}}</view>
				</view>
				<view class="itemContent" v-if="formData.executeType == 1">
					<view class="itemTitle">子类:</view>
					<view class="itemValue">{{formData.serviceSubTypeName||'--'}}</view>
				</view>
				<template v-if="formData.executeType == 0">
					<view v-show="formData.itemCharges && formData.itemCharges.length"
						class="itemContent">
						<view style="width: 100%;" class="itemTitle">农资供应:</view>
						<view v-for="(itemson,indexson) in formData.itemCharges" class="item-line">
							{{itemson.name}}:
							{{itemson.price}} 元/{{itemson.unit}}&nbsp;&nbsp;&nbsp;
							{{itemson.amount}}{{itemson.unit}}&nbsp;&nbsp;&nbsp;
							{{itemson.amount*itemson.price}}元
						</view>
						<view class="item-line">
							<view>
								服务日期:
								{{formData.deliveryStartDate}}
								-
								{{formData.deliveryEndDate}}
							</view>
						</view>
						<view class="item-line">
							<view>
								服务地址:
								{{formData.deliveryAddress||'-'}}
							</view>
						</view>
					</view>
					<view class="total-prices">
						<view class="prices">
							<view class="title">
								全部总价：
							</view>
							<view class="price">
								{{formData.executeAmount}}
							</view>
						</view>
					</view>
				</template>
				<template v-if="formData.executeType == 1">
					<view class="itemContent">
						<view style="width: 100%;" class="itemTitle">服务亩数:</view>
						<view class="item-line">
							<view>
								种植亩数（亩）:
								{{ bindValue('volume').numValue }}
							</view>
						</view>
						<view class="item-line">
							<view>
								服务次数（次）:
								{{ bindValue('times').numValue }}
							</view>
						</view>
						<view class="item-line">
							<view>
								实际服务亩数（亩）:
								{{ bindValue('acturalVolume').numValue }}
							</view>
						</view>
						<view class="item-line">
							<view>
								服务日期:
								{{bindValue('serviceBegin').textValue && dateToFormat(bindValue('serviceBegin').textValue)}}
								-
								{{bindValue('serviceEnd').textValue && dateToFormat(bindValue('serviceEnd').textValue)}}
							</view>
						</view>
						<view class="item-line">
							<view>
								服务地址:
								{{bindValue('addressArea').textValue||'-'}}
							</view>
						</view>
						<view
							class="item-line"
							v-for="(itemson,indexson) in getCustomField(serviceObj.serviceProperties || [])"
							:key="indexson"
						>
							<view>
								{{itemson.propertyName}}:
								{{bindValue(itemson.expression).textValue||'-'}}
							</view>
						</view>
					</view>
					<view class="total-prices">
						<view class="prices">
							<view class="title">
								预计单价：
							</view>
							<view class="price">
								{{ bindValue('unitPrice').numValue }}
							</view>
							<view class="title">
								预计价格：
							</view>
							<view class="price">
								{{ bindValue('payAmount').numValue || '' }}元
							</view>
						</view>
					</view>
				</template>
				<!-- <view class="itemContent">
					<view class="itemTitle">服务日期:</view>
					<view class="itemValue">
						{{bindValue('serviceBegin').textValue && dateToFormat(bindValue('serviceBegin').textValue)}}
						-
						{{bindValue('serviceEnd').textValue && dateToFormat(bindValue('serviceEnd').textValue)}}
					</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">服务地址:</view>
					<view class="itemValue">{{bindValue('addressArea').textValue||'-'}}</view>
				</view> -->
				<!-- <view class="itemContent">
					<view class="itemTitle">预计单价:</view>
					<view class="itemValue">{{formData.serviceObj&&formData.serviceObj.basePrice}}元/亩</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">预计价格:</view>
					<view class="itemValue">{{formData.orderAmount}}元</view>
				</view> -->
				<template v-if="isTongyi">
					<view class="btnBox">
						<view @click="processing('同意')" class="review">
							同意
						</view>
						<view @click="processing('驳回')" class="del">
							驳回
						</view>
					</view>
				</template>
			</view>
			<u-modal showCancelButton @cancel="cancel" @confirm="confirm" :show="modalshow" :title="modalTilte">
				<view class="slot-content">
					<view v-if="modalTilte==='同意'" class="">
						确定同意确认吗？
					</view>
					<view v-if="modalTilte==='驳回'" class="">
						<view style="color: red;font-size: 24rpx; ">
							<!-- 	*注意：确认单被驳回后项目订单将被关闭。 -->
						</view>
						<view>
							<view style="font-size: 24rpx;width:400rpx; ">
								<view style="margin-bottom: 16rpx;">
									<span style="color: red;">*</span>驳回原因：
								</view>
								<uni-easyinput v-model="reason" placeholder="请输入原因" type="textarea"></uni-easyinput>
							</view>
						</view>
					</view>
				</view>
			</u-modal>
		</scroll-view>



	</view>
</template>

<script>
	import orderQuotationApi from '@/api/socialized-servce/order-center/orderQuotation.js'
	import {
		dateToFormat
	} from "@/plugins/timestamp.js"
	export default {
		components: {

		},
		data() {
			return {
				dateToFormat,
				page: 1,
				size: 10,
				total: 0,
				totalPages: 0,
				loading: false,
				postList: [],
				formData: {},
				serviceObj: {},
				modalTilte: '',
				modalshow: false,
				editmodalshow: false,
				reason: '',
				isTongyi: true,
				executeNo: ''
			}
		},
		onLoad(e) {
			if (Object.keys(e).length) {
				let obj = JSON.parse(e.data)
				this.executeNo = obj.executeNo
				// this.formData = obj
			}
		},
		mounted() {
			this.setcollapseheight()
			this.queryApplyExecuteChange()
		},
		methods: {
			getCustomField(list) {
				let arr = list.filter(el => {
					return el.propertyCode
				})
				return arr
			},
			bindValue(expression) {
				let row = this.serviceObj.serviceProperties.find(el => {
					return el.expression == expression
				})
				return row || {}
			},
			queryApplyExecuteChange() {
				let params = {
					executeNo: this.executeNo
				}
				orderQuotationApi.queryApplyExecuteChange(params).then(res => {
					this.formData = res.data || {}
					this.serviceObj = res.data.serviceObj
				})
			},

			processing(title) {
				this.modalTilte = title
				this.modalshow = true
			},

			cancel() {
				this.reason = null
				this.modalshow = false
			},
			confirm() {
				if (this.modalTilte === '同意') {
					let executeNo = this.formData.executeNo
					orderQuotationApi.examineApplyExecute(executeNo, this.reason, true).then(res => {
						uni.showToast({
							title: res.code == 200 ? '操作成功' : '操作失败',
							icon: 'none'
						})
						if (res.code == 200) {
							this.modalshow = false
							this.queryApplyExecuteChange()
							this.isTongyi = false
							setTimeout(function() {
								this.$togo('/pages/socialized-service/order-center/order-center')
							}, 1000);
						} else {
							this.isTongyi = true
						}
					})


				} else if (this.modalTilte === '驳回') {
					if (!this.reason) {
						uni.showToast({
							title: '请输入原因',
							icon: 'none'
						})
						return
					} else {
						let executeNo = this.formData.executeNo
						orderQuotationApi.examineApplyExecute(executeNo, this.reason, false).then(res => {
							uni.showToast({
								title: res.code == 200 ? '操作成功' : '操作失败',
								icon: 'none'
							})
							if (res.code == 200) {
								this.modalshow = false
								this.queryApplyExecuteChange()
								this.isTongyi = false
								setTimeout(function() {
									this.$togo('/pages/socialized-service/order-center/order-center')
								}, 1000);
							} else {
								this.isTongyi = true
							}
						})
					}

				}
			},

			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(36)
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(56)

				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 20

				// #endif
				return winHeight
			},
			copyText(text) {
				// 将文本设置到剪贴板
				uni.setClipboardData({
					data: text,
					success: () => {
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	.scrollView {
		padding: 30rpx 30rpx 0rpx;
		box-sizing: border-box;
	}

	.itemBox {
		margin: 10rpx auto 0rpx;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		margin: 0 auto;
		width: 100%;
		min-height: 85vh;
		opacity: 1;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.05);

		.itemContent {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			min-height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(39, 39, 39, 1);
			border-bottom: 2rpx solid rgba(235, 235, 235, 1);
			
			.item-line {
				display: block;
				width: 100%;
				margin-left: 20rpx;
				font-size: 24rpx;
			}
		}

		.itemTitle {
			min-width: 180rpx;
		}

		.itemValue {
			width: 450rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.lookDetail {
			border-radius: 20rpx;
			box-sizing: border-box;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #84a9ff;
			border: 2rpx solid #5555ff;
			color: #fff;

		}
	}

	.contant {}

	.popup-photo {
		width: 80vw;
		height: 80vh;
	}

	.btnBox {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: wrap;
		color: #ffffff;
		margin-top: 20rpx;

		.lookClose,
		.lookCompleted,
		.review,
		.del {
			min-width: 140rpx;
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			padding: 4rpx 12rpx;
			text-align: center;
			margin-left: 8rpx;
			background: linear-gradient(270deg, rgba(136, 172, 255, 1) 0%, rgba(33, 101, 255, 1) 100%);

		}

		.lookCompleted {}

		.del {
			background: linear-gradient(270deg, rgba(249, 170, 170, 1) 0%, rgba(255, 108, 108, 1) 100%);
		}
	}
	.total-prices {
		padding: 20rpx 0 50rpx;

		.prices {
			display: flex;
			justify-content: flex-end;
			// align-items: center;
			line-height: 40rpx;

			.title {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #606060;
				vertical-align: middle;
			}

			.price {
				font-size: 28rpx;
				font-family: Arial-Bold, Arial;
				font-weight: bold;
				color: #2165FF;
				vertical-align: middle;
				margin-right: 30rpx;
			}
		}
	}
</style>